<!DOCTYPE html>
<html lang="en-us">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" href="favicon.ico" />
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link href="css/font-awesome.min.css" rel="stylesheet" />
    <link href="css/default.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery.min.js"></script>
    <!-- table导出成csv -->
    <script src="js/table2excel.js"></script>
    <script src="js/bootstrap/bootstrap.min.js"></script>
    <script src="js/bootstrap/bootstrap-table.min.js"></script>
    <script src="js/bootstrap/bootstrap-table-zh-CN.min.js"></script>
    <!--[if lt IE 9]>
    <script src="js/bootstrap/html5shiv.min.js"></script>
    <script src="js/bootstrap/respond.min.js"></script>
    <![endif]-->
    <!--页面加载进度条-->
    <link href="css/pace/dataurl.css" rel="stylesheet" />
    <script src="js/pace/pace.min.js"></script>
    <script src="js/jquery.scrolltopcontrol/scrolltopcontrol.js" type="text/javascript"></script>
    <script src="js/jquery.extend.js" type="text/javascript"></script>
    <script src="js/default.js" type="text/javascript"></script>
    <script src="js/jqueryrotate.js" type="text/javascript"></script>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
        }

        .fixed-table-header {
            display: none !important;
        }

        #id-card-photo-wrapper {
            display: none;
            width: 720px;
            height: 480px;
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        #id-card-photo-wrapper #ic-rotate {
            position: absolute;
            right: 0;
            top: 0;
            width: 33px;
            height: 33px;
            line-height: 33px;
            text-align: center;
            background: #fff;
            cursor: pointer;
            box-shadow: 2px 2px 2px #eee, -2px -2px 2px #eee;
        }

        #id-card-photo {
            background: #fff;
            padding: 10px;
            display: block;
            width: 100%;
            height: 100%;
            box-shadow: 2px 2px 5px #ddd, -2px -2px 5px #ddd;
        }

        .bootstrap-table {
            padding: 10px 16px;
        }

        .agree-item {
            color: #a94442;
        }

        .params-warpper {
            display: flex;
            flex-direction: row;
            padding-right: 200px;
        }

        #search-btn {
            position: absolute;
            right: 50px;
            top: 50%;
            transform: translateY(-50%);
            width: 100px;
        }

        .params-warpper .params-item {
            flex: 1;
            display: flex;
            flex-direction: row;
            margin-top: 10px;
        }

        .params-warpper .params-item label {
            display: inline-block;
            min-width: 120px;
            line-height: 34px;
            text-align: right;
            letter-spacing: 2px;
        }

        .params-warpper .params-item .value {
            flex: 1;
        }

        .maincontent {
            min-width: 1000px !important;
            overflow: hidden !important;
            overflow-x: scroll !important;
        }
    </style>
</head>

<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle show pull-left" data-target="sidebar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"
                    aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="index.html">首页</a>
            </div>
            <div id="navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
                            <i class="fa fa-user fa-fw"></i>
                            <span class="username"></span>
                            <span class="caret"></span>
                        </a>
                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                            <a class="dropdown-item" href="javascript:logout();">退出登录</a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="container-fluid all">
        <div class="sidebar">
            <ul class="nav">
                <li>
                    <a href="index.html">首页</a>
                </li>
                <li class="has-sub">
                    <a href="coupon-review.html">
                        <span>民生免费券</span>
                        <i class="fa fa-caret-right fa-fw pull-right"></i>
                    </a>
                </li>
                <li class="has-sub">
                    <a href="add-sample/sample-list.jsp">
                        <span>送检单</span>
                        <i class="fa fa-caret-right fa-fw pull-right"></i>
                    </a>
                </li>
                <li class="has-sub">
                    <a href="screening.html">
                        <span>两癌筛查管理</span>
                        <i class="fa fa-caret-right fa-fw pull-right"></i>
                    </a>
                </li>
            </ul>
        </div>
        <div class="maincontent">
            <!--我是主要内容-->
            <div class="panel panel-default">
                <div class="panel-heading">
                    查询条件
                </div>
                <div class="panel-body form-group" style="margin-bottom:0px; position:relative;">
                    <div class="params-warpper">
                        <div class="params-item">
                            <label class="control-label">姓名：</label>
                            <input type="text" placeholder="请输入姓名" class="form-control value" id="search-name" />
                        </div>
                        <div class="params-item">
                            <label class="control-label">身份证号码：</label>
                            <input type="text" placeholder="请输入身份证号码" class="form-control value" id="search-idcard" />
                        </div>
                        <div class="params-item">
                            <label class="control-label">申请日期：</label>
                            <input type="date" class="form-control value" id="search-date" />
                        </div>
                        <div class="params-item">
                            <label class="control-label">检测项目：</label>
                            <select type="text" class="form-control value" id="search-status">
                                <option value=''>请选择状态</option>
                                <option value="0">乳腺癌</option>
                                <option value="1">宫颈癌（HPV）</option>
                            </select>
                        </div>
                    </div>
                    <button class="btn btn-primary" id="search-btn">查询</button>
                </div>
            </div>
            <table id="mytab" class="table table-hover"></table>
            <div id="toolbar" class="btn-group pull-right" style="margin-right: 20px;">
                <a href="screening_fu.html" class="btn btn-default" style="margin-left: 10px">妇科检查</a>
                <a href="screening_ru.html" class="btn btn-default" style="margin-left: 10px">乳腺触诊</a>
                <a href="screening_ultrasonic.html" class="btn btn-default" style="margin-left: 10px">乳腺彩色超声检查</a>
            </div>
        </div>
    </div>
    <a href="#top" id="goTop">
        <i class="fa fa-angle-up fa-3x"></i>
    </a>
    <div id="id-card-photo-wrapper">
        <img alt='' id="id-card-photo" />
        <span class="glyphicon glyphicon-repeat" aria-hidden="true" id="ic-rotate"></span>
    </div>
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        转发
                    </h4>
                </div>
                <div class="modal-body">
                    转发至：
                    <select name='' id="countrySelect" onchange="onCountryChange(this.value)">&nbsp;&nbsp;
                    </select>
                    <select name='' id="steetSelect" onchange="onSteetChange(this.value)">
                    </select>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        关闭
                    </button>
                    <button type="button" class="btn btn-primary" onclick="transpond();">
                        确认
                    </button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal -->
    </div>
    <script>
        //区县列表
        $.ajax({
            method: 'POST',
            url: '/csfy/intf.do',
            data: { method: 'getAddrs', parentId: 4301 },
            success: function (res) {
                var options = '<option value="">请选择</option>'
                if (res && res.code == 200) {
                    (res.rows || []).forEach(countryItem => {
                        options += '<option value="' + countryItem.name + '">' + countryItem.name + '</option>';
                    })
                }
                $('#search-country').html(options);
            }
        });
        //医院列表
        $.ajax({
            method: 'POST',
            url: '/csfy/intf.do',
            data: {
                method: 'getCustomers',
                addressCity: '长沙市',
            },
            success: function (res) {
                if (res && res.code == 200) {
                    var customerList = res.rows || [];
                    var customerOptions = '<option>请选择医院</option>';
                    customerList.forEach(customer => {
                        customerOptions += '<option value="' + customer.customerCode + '">' + customer.customerName + '<option>';
                    });
                    $('#search-customer').html(customerOptions);
                }
            }
        });

        // 导出表格
        function exportTable() {
            $("#mytab").table2excel({
                // exclude: ".noExl",//排除
                name: "Excel Document Name",
                filename: "免费券" + new Date().getTime() + ".xls",
                fileext: ".xls"
            });
        }
        //退出登录
        function logout() {
            $.ajax({
                url: '/csfy/dologout.do',
                method: 'POST',
                success: function (res) {
                    if (JSON.parse(res).code == 200) {
                        window.location.href = "/csfy/index.do"
                    }
                }
            })
        }
        //TODO 获取当前登录用户所在的省市区 start
        //设置街道
        function onSteetChange(parentId) {
            town = $("#steetSelect option[value='" + parentId + "']").text();
        }
        //设置地区
        function onCountryChange(parentId) {
            country = $("#countrySelect option[value='" + parentId + "']").text();
            $.ajax({
                method: 'POST',
                url: '/csfy/intf.do',
                data: {
                    method: 'getAddrs',
                    parentId,
                },
                success: (res) => {
                    if (res.code == 200 && res.rows) {
                        var steetList = '';
                        town = '';
                        res.rows.map((item, index) => {
                            if (index == 0) {
                                town = item.name;
                            }
                            steetList += '<option value="' + item.code + '">' + item.name + '</option>'
                        })
                        $("#steetSelect").html(steetList);
                    }
                }
            });
        }

        //设置转发地区下拉选项
        $.ajax({
            method: 'POST',
            url: '/csfy/intf.do',
            data: { method: 'getLoginUserInfo' },
            success: res => {
                if (res.code == 10086) {
//                    window.location.href = "/csfy/index.do"
                    alert("请重新登录！");
                } else {
                    if (res.code == 200 && res.rows) {
                        $(".username").html(res.rows.userName);
                        $.ajax({
                            method: 'POST',
                            url: '/csfy/intf.do',
                            data: {
                                method: 'getAddrs',
                                parentId: res.rows.cityCode,
                            },
                            success: (res) => {
                                if (res.code == 200 && res.rows) {
                                    var countryList = '';
                                    var pCode = '';
                                    res.rows.map((item, index) => {
                                        if (index == 0) {
                                            country = item.name;
                                            pCode = item.code;
                                        }
                                        countryList += '<option value="' + item.code + '">' + item.name + '</option>'
                                    })
                                    $("#countrySelect").html(countryList);
                                    onCountryChange(pCode);

                                }
                            }
                        });
                    }
                }
            }
        })
        //获取当前登录用户所在的省市区 end

        var idCard = '';//身份证
        var town = '';//街道
        var country = '';//地区

        //TODO 确定转发
        function transpond() {
            $.ajax({
                method: 'POST',
                data: {
                    method: 'savePresonInfo',
                    id: idCard,
                    town: town,
                    country: country
                },
                url: '/csfy/intf.do',
                success: (res) => {
                    if (res.code == 200) {
                        $('#search-btn').trigger("click");
                        alert('转发成功！');
                        $('#myModal').modal('hide');
                    }
                }
            })
        }
        $("body").click(function () {
            $("#id-card-photo-wrapper").hide(300);
            angle = 0;
            $("#id-card-photo").rotate(0);
        })
        Date.prototype.pattern = function (fmt) {
            var o = {
                "M+": this.getMonth() + 1, //月份
                "d+": this.getDate(), //日
                "h+": this.getHours() % 12 == 0 ? 12 : this.getHours() % 12, //小时
                "H+": this.getHours(), //小时
                "m+": this.getMinutes(), //分
                "s+": this.getSeconds(), //秒
                "q+": Math.floor((this.getMonth() + 3) / 3), //季度
                "S": this.getMilliseconds() //毫秒
            };
            var week = {
                "0": "/u65e5",
                "1": "/u4e00",
                "2": "/u4e8c",
                "3": "/u4e09",
                "4": "/u56db",
                "5": "/u4e94",
                "6": "/u516d"
            };
            if (/(y+)/.test(fmt)) {
                fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
            }
            if (/(E+)/.test(fmt)) {
                fmt = fmt.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? "/u661f/u671f" : "/u5468") : '') + week[this.getDay() + '']);
            }
            for (var k in o) {
                if (new RegExp("(" + k + ")").test(fmt)) {
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(('' + o[k]).length)));
                }
            }
            return fmt;
        }
        //根据窗口调整表格高度
        $(window).resize(function () {
            $('#mytab').bootstrapTable('resetView', {
                height: tableHeight()
            })
        })
        //生成用户数据
        $('#mytab').bootstrapTable({
            method: 'POST',
            contentType: "application/x-www-form-urlencoded",//必须要有！！！！
            url: "/csfy/intf.do?method=getDetailPresonInfos",//要请求数据的文件路径
            height: tableHeight(),//高度调整
            toolbar: '#toolbar',//指定工具栏
            striped: true, //是否显示行间隔色
            dataField: "rows",//bootstrap table 可以前端分页也可以后端分页，这里
            //我们使用的是后端分页，后端分页时需返回含有total：总记录数,这个键值好像是固定的
            //rows： 记录集合 键值可以修改  dataField 自己定义成自己想要的就好
            pageNumber: 1, //初始化加载第一页，默认第一页
            pagination: true,//是否分页
            queryParamsType: 'limit',//查询参数组织方式
            queryParams: queryParams,//请求服务器时所传的参数
            sidePagination: 'server',//指定服务器端分页
            pageSize: 10,//单页记录数
            pageList: [5, 10, 20, 30],//分页步进值
            showRefresh: true,//刷新按钮
            // showColumns: true,
            clickToSelect: true,//是否启用点击选中行
            toolbarAlign: 'left', //工具栏对齐方式
            buttonsAlign: 'left',//按钮对齐方式
            toolbar: '#toolbar',//指定工作栏
            columns: [
                {
                    title: '选项',
                    field: 'select',
                    //复选框
                    radio: true,
                    width: 25,
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '姓名',
                    field: 'name',
                    //列数据格式化
                    formatter: formatName
                },
                {
                    title: '送检单',
                    //列数据格式化
                    formatter: formatAddress
                },
                {
                    title: '免费券类型',
                    field: 'type',
                    width: 120,
                },
                {
                    title: '免费类型',
                    field: 'presonType',
                    formatter: formatPersonType
                },
                {
                    title: '身份证号',
                    field: 'id',
                },
                {
                    title: '样本状态',
                    field: 'status',
                    //列数据格式化
                    formatter: formatStatus
                },
                {
                    title: '申请日期',
                    field: 'createTime',
                    //列数据格式化
                    formatter: formatDate
                },
                {
                    title: '诊断',
                    field: 'Attribute',
                    align: 'center',
                    //列数据格式化
                    formatter: formatPhoto
                },
                {
                    title: '检测报告',
                    field: 'Attribute',
                    align: 'center',
                    //列数据格式化
                    formatter: operateFormatter
                }
            ],
            locale: 'zh-CN',//中文支持,
            responseHandler: function (res) {
                //在ajax获取到数据，渲染表格之前，修改数据源
                return res;
            },
            onRefresh: function (params) {
                if (params && params.query) {
                    return false;
                }
                $("#search-name").val('');
                $("#search-date").val('');
                $("#search-status").val('');
                $("#search-steet").val('');
                $("#search-product").val('');
                $("#search-idcard").val('');
                $("search-country").val('');
                $("#search-customer").val('');
                $("#search-coupontype").val('');
            }
        });
        function toDetail(id) {
            window.location.href = "/csfy/static/manage-sys/coupon-detail.html?id=" + id
        }
        //三个参数，value代表该列的值
        function formatStatus(value, row, index) {
            value = parseInt(value);
            var text = '';
            if (!isNaN(value)) {
                if (value === 1) {
                    text = '审批通过';
                } else if (value === 0) {
                    text = '审批中';
                } else if (value === -1) {
                    text = '未审批通过';
                }
            }
            return '<span style="color: rgba(0,0,0,.45);">' + text + '</span>';
        }
        //三个参数，value代表该列的值
        function formatName(value, row, index) {
            return '<a href="javascript:toDetail(' + ('\'' + row.id + '\'') + ');">' + value + '</a>';
        }
        //三个参数，value代表该列的值
        function operateFormatter(value, row, index) {
            return '<a href="javascript:setIdCard(' + ('\'' + row.id + '\'') + ');">转发</a>'
        }
        function setIdCard(id) {
            idCard = id;
            $('#myModal').modal('show')
        }
        //三个参数，value代表该列的值
        function formatAddress(value, row, index) {
            return (row.city || '') + (row.country || '') + (row.town || '');
        }
        //三个参数，value代表该列的值
        function formatDate(value, row, index) {
            var time = Date.parse(value);
            var date = new Date(time);
            return date.pattern("yyyy-MM-dd hh:mm:ss")
        }
        //三个参数，value代表该列的值
        function formatPersonType(value, row, index) {
            //优惠类型
            var type = parseInt(value);
            var text = '其他免费类型';
            if (isNaN(type)) {
            } else {
                if (type === 1) {
                    text = '本人为长沙户口';
                } else if (type === 2) {
                    text = '配偶为长沙户口';
                } else if (type === 3) {
                    text = '长沙居住证';
                } else if (type === 4) {
                    text = '军人及军人配偶';
                }
            }
            return '<span style="color: rgba(0,0,0,.45);">' + text + '</span>';
        }
        function toSeeIdCardPhoto(photoUrl) {
            $("#id-card-photo").attr('src', photoUrl);
            $("#id-card-photo-wrapper").show(300);
        }
        //三个参数，value代表该列的值
        function formatPhoto(value, row, index) {
            return '<a href="javascript:toSeeIdCardPhoto(' + ("'" + row.cardFrontImgUrl) + "'" + ');">查看</a>';
        }
        //请求服务数据时所传参数
        function queryParams(params) {
            return {
                //每页多少条数据
                rows: params.limit,
                //请求第几页
                page: params.pageNumber,
            }
        }
        //查询按钮事件
        $('#search-btn').click(function () {
            var name = $("#search-name").val() || '';
            var createTime = $("#search-date").val() || '';
            var status = $("#search-status").val() || '';
            var town = $("#search-steet").val() || '';
            var productName = $("#search-product").val() || '';
            var id = $("#search-idcard").val() || '';
            //区/县
            var country = $("#search-country").val() || '';
            //送检医院
            var customerCode = $("#search-customer").val() || '';
            //优惠券类型
            var productCode = $("#search-coupontype").val() || '';

            var query = {};
            if (name != '') {
                query.name = name;
            }
            if (createTime != '') {
                query.createTime = createTime;
            }
            if (status != '') {
                query.status = status;
            }
            if (town != '') {
                query.town = town;
            }
            if (productName != '') {
                query.productName = productName;
            }
            if (id != '') {
                query.id = id;
            }
            //区/县
            if (country != '') {
                query.country = country;
            }
            //送检医院
            if (customerCode != '') {
                query.customerCode = customerCode;
            }
            //优惠券类型
            if (productCode != '') {
                query.productCode = productCode;
            }
            $('#mytab').bootstrapTable('refresh', { url: '/csfy/intf.do?method=getDetailPresonInfos', query });
        })
        //tableHeight函数
        function tableHeight() {
            //可以根据自己页面情况进行调整
            return $(window).height() - 280;
        }
        $("#btn_add").click(function () {
            //TODO
            window.location.href = "/csfy/static/manage-sys/coupon-apply.html"
        });
        //批量审批，身份证列表
        var idList = [];
        function agreeList() {
            var rows = $("#mytab").bootstrapTable('getSelections');
            if (!rows || rows.length === 0) {
                alert('未选中操作的行');
            } else {
                var agreeList = '';
                idList.length = 0;
                rows.map(item => {
                    idList.push(item.id);
                    if (item.couponInfos && item.couponInfos.length && item.couponInfos.length > 0) {
                        var couponList = [];
                        item.couponInfos.forEach(couponItem => couponList.push(couponItem.couponName));
                        agreeList += '<p class="agree-item">' + (item.name + '，' + item.id + '，' + item.address + '，免费券：' + couponList.join("、")) + '</p>';
                    } else {
                        agreeList += '<p class="agree-item">' + (item.name + '，' + item.id + '，' + item.address + '，免费券：无') + '</p>';
                    }
                });
                $(".agree-list").html(agreeList);
                $('#agreeModel').modal('show');
            }
        }
        var angle = 0;
        $("#ic-rotate").bind("click", function (event) {
            event.stopPropagation();
            $("#id-card-photo").rotate({
                angle: angle,
                animateTo: angle + 90,
                duration: 300,
                callback: function () { angle += 90 }
            });
        });
        //同意——批量审批
        function agree() {
            $("#agreeModel").modal('hide');

            var promise = new Promise(function (resolve, reject) {
                var index = 0;
                var success = true;
                idList.map(id => {
                    $.ajax({
                        url: '/csfy/intf.do',
                        method: 'POST',
                        data: { method: 'savePresonInfo', id: id, status: '1' },
                        success: function (res) {
                            success = res.code == 200;
                            index++;
                            if (index == idList.length) {
                                if (success) {
                                    resolve('操作成功');
                                } else {
                                    reject('操作失败');
                                }
                            }
                        }, error: function (msg) {
                            index++;
                            if (index == idList.length) {
                                reject('操作失败');
                            }
                        }
                    })
                });
            });

            promise.then(function (value) {
                alert(value);
            }, function (value) {
                alert(value);
            });
        }
        //不同意——批量审批
        function disAgree() {
            $("#agreeModel").modal('hide');

            var promise = new Promise(function (resolve, reject) {
                var index = 0;
                var success = true;
                idList.map(id => {
                    $.ajax({
                        url: '/csfy/intf.do',
                        method: 'POST',
                        data: { method: 'savePresonInfo', id: id, status: '-1' },
                        success: function (res) {
                            success = res.code == 200;
                            index++;
                            if (index == idList.length) {
                                if (success) {
                                    resolve('操作成功');
                                } else {
                                    reject('操作失败');
                                }
                            }
                        }, error: function (msg) {
                            index++;
                            if (index == idList.length) {
                                reject('操作失败');
                            }
                        }
                    })
                });
            });

            promise.then(function (value) {
                alert(value);
            }, function (value) {
                alert(value);
            });
        }
    </script>
</body>

</html>